<template>
  <div class="list">
    <div v-if="isCart" class="list-cart">
      <div class="item-header">
        <div class="item-header-left1">
          <input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length">
        </div>
        <div class="item-header-left2">
          <img src="static/img/iconfont-jiantou.png" alt="">
        </div>
        <div class="item-header-left3">
          <span>美麦就好</span><img src="static/img/right_arrow.png">
        </div>
        <div class="shop-shangpin-list-edit">
          <div class="shop-shangpin-list-edit-left1"></div>
          <!-- <div class="shop-shangpin-list-edit-left2"><span>编辑</span></div> -->
        </div>
      </div>
      <div class="itemMainDiv" v-for="item of cart_list" :key="item.goodsId">
        <div class="item-content-left1"><input type="checkbox" :value="item" v-model="check_goods"></div>
        <router-link :to="'/detail/' + item.goodsId">
          <img class="itemPhoto" :src="item.img">
        </router-link>
        <div class="contentLiDiv">
          <div class="itemProName">{{item.name}}</div>
          <div class="itemProContent"><span v-show="item.type===0">积分：{{item.point}}</span></div>
          <div class="num_div">
            <span class="btn minus" @click="quantityData(item.goodsId,item.quantity,'minus')" v-on:click="reduce(item)">-</span>
            <input class="btn-group" type="number" v-model="item.quantity" @input="quantityData(item.goodsId,item.quantity)" />
            <span class="btn add" @click="quantityData(item.goodsId,item.quantity,'add')" v-on:click="add_num(item)">+</span>
          </div>
        </div>
        <div class="rightWrapper"><div class="itemProPrice">￥{{item.price}}</div><div @click="itemDel(item.goodsId)" class="itemProCount">删除</div></div>
      </div>
      <div style="height: 2rem"></div>
      <div class="content-footer">
        <div class="content-footer-left1"><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"></div>
        <div class="content-footer-left2">全选</div>
        <div class="content-footer-left3">
          <div class="content-footer-left3-item1">
            <div class="content-footer-left3-item1-top1">
              <font style="font-size:15px;">总价:</font>
              <font style="color:red;">￥{{total_price}}<span v-show="total_point">+{{total_point}}</span></font>
            </div>
            <div class="content-footer-left3-item1-top2">
              <div class="content-footer-left3-item1-top2-wrapper">不含运费</div>
            </div>
          </div>
          <div class="jiesan-button" @click="statement">
            <span>结算</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!isCart" class="content-main">
      <div class="content-row1-top1">
        <img class="content-row1-top1-img" src="../../../assets/img/2016042902.png">
      </div>
      <div class="content-row1-top2">
        <span>购物车快饿瘪了</span>
      </div>
      <div class="content-row1-top3">
        <span>主人快点给我挑点宝贝吧！</span>
      </div>
      <div class="content-row1-top4">
        <router-link tag="span" to="/type" id="row2-button1">去逛逛</router-link>
      </div>
      <div class="not-content">---您可能还想买---</div>
      <home-guess :list="guessList" :isDefault="false"></home-guess>
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui'
import axios from 'axios'
import HomeGuess from '../../home/components/Guess'
export default {
  name: 'CartList',
  components: {
    HomeGuess
  },
  data () {
    return {
      isCart: true,
      cart_list: [],
      guessList: [],
      check_goods: []
    }
  },
  computed: {
    total_price () {
      let price = 0
      this.check_goods.forEach((item) => {
        price += Number(item.price) * Number(item.quantity)
      })
      return price
    },
    total_point () {
      let point = 0
      this.check_goods.forEach((item) => {
        point += Number(item.point) * Number(item.quantity)
      })
      return point
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/cart/get', {
        params: { 'memberId': this.$store.state.userId }
      }).then((res) => {
        res = res.data
        console.log(res)
        if (res.code === 0 && res.data) {
          this.cart_list = res.data.array
          if (this.cart_list.length < 1) {
            this.isCart = false
          } else {
            this.isCart = true
          }
        } else {
          this.isCart = false
        }
      })
      axios.get('/meimai/interface/goods/getRelated').then((res) => {
        let datas = res.data
        // console.log(datas)
        if (datas.code === 0 && datas.data) {
          this.guessList = datas.data
        }
      })
    },
    quantityData (res, data, info) {
      if (info === 'add') {
        data++
      }
      if (info === 'minus') {
        data--
      }
      if (data > 1) {
        axios.get('/meimai/interface/cart/edit', {
          params: {
            'memberId': this.$store.state.userId,
            'goodsId': res,
            'quantity': data
          }
        }).then((res) => {
        })
      }
    },
    reduce (cart) {
      if (cart.quantity <= 0) {
        cart.quantity = 0
      } else {
        cart.quantity--
      }
    },
    add_num (cart) {
      cart.quantity++
    },
    check_all () {
      if (this.check_goods.length > 0) {
        this.check_goods = []
      } else {
        this.cart_list.forEach((item) => {
          this.check_goods.push(item)
        })
      }
    },
    itemDel (cart) {
      axios.get('/meimai/interface/cart/remove', {
        params: { 'memberId': this.$store.state.userId, 'goodsId': cart }
      }).then((res) => {
        Toast('删除成功')
        this.getInfo()
      })
    },
    statement () {
      console.log(this.check_goods)
      if (this.check_goods.length < 1) {
        MessageBox('提示', '您还没有选择宝贝')
        return false
      }
      let tcartItemDOs = '?memberId=' + this.$store.state.userId
      let numDos = ''
      this.check_goods.forEach((res, index) => {
        // var item = {}
        // item.id = res.id
        // item.goodId = res.goodsId
        // item.goodImg = res.img
        // item.quantity = res.quantity
        // item.goodName = res.name
        // item.goodPrice = res.price
        tcartItemDOs += '&tCartItemDOs[' + index + '].id=' + res.id + '&tCartItemDOs[' + index + '].quantity=' + res.quantity
        // tcartItemDOs[index] = item
        // tcartItemDOs.push(item)
        numDos = Number(numDos) + Number(res.type)
      })
      // console.log(numDos)
      if (numDos === 0 || numDos === this.check_goods.length) {
        sessionStorage.setItem('tcartItemDOs', tcartItemDOs)
        this.$router.push('/order')
      } else {
        MessageBox('错误', '积分商品不能与普通商品一起购买！')
        return false
      }
      // var params = new URLSearchParams()
      // params.append('memberId', this.$store.state.userId)
      // params.append('tCartItemDOs', tcartItemDOs)
      // axios.post('/meimai/interface/order/orderInfo', params).then((res) => {
      //   console.log(res)
      // })
      // axios.get('/meimai/interface/order/orderInfo' + tcartItemDOs).then((res) => {
      //   console.log(res)
      // })
      // this.$router.push('/order')
    }
  },
  mounted () {
    this.getInfo()
    document.querySelector('body').setAttribute('style', 'background-color:#f8f8f8;height: 100%')
  },
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.list
  height: 100%
  background: #f8f8f8
  .list-cart
    .item-header
      width: 100%
      height: 54px
      position: relative
      border-top: 1px solid #F1F1F1
      background: #fff
      padding-left: 5px
      box-sizing: border-box;
      .item-header-left1
        width: 20px
        float: left
        vertical-align: middle
        line-height: 54px
      .item-header-left2
        float: left
        margin-left: 10px
        height: 54px
        line-height: 54px
        img
          width: 22px;
          vertical-align: sub;
      .item-header-left3
        float: left;
        margin-left: 5px;
        line-height: 54px;
        width: 58%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        img
          margin: -3px 0 0 5px;
      .shop-shangpin-list-edit
        width: 50px;
        float: right;
        height: 100%;
        line-height: 54px;
        .shop-shangpin-list-edit-left1
          float: left;
          width: 1px;
          height: 26px;
          margin-top: 14px;
          background: #DEDBD5;
        .shop-shangpin-list-edit-left2
          float: left;
          text-align: center;
          width: 49px;
    .itemMainDiv
      padding: 5px;
      position: relative;
      clear: both;
      background: #e9e9e9;
      margin-bottom: 10px;
      height: 112px;
      box-sizing: border-box;
      .item-content-left1
        width: 20px;
        float: left;
        vertical-align: middle;
        height: 90px;
        line-height: 90px;
      .itemPhoto
        border-radius: 2px;
        border: 1px solid #B3B3B3;
        width: 85px;
        height: 85px;
        float: left;
        margin-left: 10px;
        margin-top: 5px;
      .contentLiDiv
        float: left;
        min-height: 70px;
        word-break: break-all;
        word-wrap: break-word;
        margin-left: 6px;
        margin-top: 11px;
        width: 45%;
        .itemProName
          height: 20px;
          line-height: 19px;
          font-size: 14px;
          color: #707070;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        .num_div
          float: left;
          height: 20px;
          line-height: 20px;
          margin-right: 10px;
          background: #fff
          .minus,
          .add
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #c4c4c4;
            text-align: center
          .btn-group
            float: left;
            width: 30px;
            height: 20px;
            line-height: 20px;
            border-top: 1px solid #c4c4c4;
            border-bottom: 1px solid #c4c4c4;
            background: #fff
      .rightWrapper
        margin-top: 11px;
        margin-right: 6px;
        width: 18%;
        float: right;
        text-align: right;
        .itemProPrice
          color: #ed2935;
        .itemProCount
          line-height: 60px;
    .content-footer
      position: fixed;
      bottom: 1rem;
      height: 44px;
      width: 100%;
      background: #f9f9f9;
      border-top: 1px solid #d4d4d4;
      padding-left: 10px;
      line-height: 43px;
      box-sizing: border-box;
      overflow: hidden;
      .content-footer-left1
        width: 20px;
        float: left;
        vertical-align: middle;
        line-height: 40px;
      .content-footer-left2
        float: left;
        margin-left: 8px;
      .content-footer-left3
        max-width: 78%;
        width: 78%;
        text-align: right;
        float: right;
        box-sizing: border-box;
        .content-footer-left3-item1
          max-width: 65%;
          width: 100% !important;
          text-align: right;
          float: left;
          width: auto;
          box-sizing: border-box;
          .content-footer-left3-item1-top1
            clear: both;
            text-align: right;
            width: 100%;
            line-height: 20px;
            margin-top: 2px;
          .content-footer-left3-item1-top2
            clear: both;
            width: 100%;
            line-height: 20px;
            margin-top: 2px;
            display: flex;
            justify-content: flex-end
            color: #999
            .content-footer-left3-item1-top2-wrapper
              float: right;
              text-align: right
              line-height: 20px;
              color: grey;
        .jiesan-button
          float: right;
          min-width: 90px;
          padding: 0px 26px;
          line-height: 44px;
          height: 45px;
          text-align: center;
          background: #ec2935;
          color: #fff
          box-sizing: border-box;
  .content-main
    padding: .6rem 0 1rem
    clear: both
    overflow: auto
    width: 100%
    .content-row1-top1
      width: 100%
      margin-top: 12px
      text-align: center
      .content-row1-top1-img
        width: 30%
    .content-row1-top2
      width: 100%
      text-align: center
      margin-top: 10px
      color: grey
      font-size: 18px
    .content-row1-top3
      width: 100%
      text-align: center
      margin-top: 10px
      color: #b2b2b2
      font-size: 16px
    .content-row1-top4
      width: 100%
      text-align: center
      padding-top: 10px
      #row2-button1
        height: 28px
        line-height: 50px
        padding: 8px 25px
        font-size: 15px
        letter-spacing: 1px
        background: #fff
        color: #ec2935
        border: 1px solid #ec2935
    .not-content
      text-align: center
      margin: 0.6rem 0 0.3rem
    .item-list
      display: flex
      justify-content: space-between
      padding: .3rem
      flex-wrap: wrap
      .item-goods
        margin-bottom: .3rem
        background: #fff
        width: 48%
        box-shadow: .1rem .1rem .06rem rgba(105, 105, 105, .2)
        .item-img
          width: 100%
          height: auto
        .item-goods-tit
          padding: .1rem
          ellipsis()
        .item-goods-desc
          padding: .1rem
          display: flex
          justify-content: space-between
          .text-red
            color: red
</style>
